iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0
Modern Web

Super Easy CSS,極度簡單 PART 2!寫出漂亮的 CSS系列 第 18

#52 詳細了解 CSS 各種偽類:hover、focus、active、focus-within、focus-visible、target

  • 分享至 

  • xImage
  •  

CSS 偽類提供了一種方法,讓我們可以根據元素的不同狀態來變更其樣式。例如,當使用者將滑鼠移到元素上或點擊元素時,偽類會根據這些狀態套用特定的樣式(突然覺得這應該在剛開始先交給大家 XD)。

註:最近重感冒好了一些,加上放了颱風假,明天開始會漸漸地把之前和這一篇缺的的 DEMO 補上。

以下是幾個常用的偽類介紹及應用:


1. :hover(滑鼠懸停)

當使用者將滑鼠懸停在元素上時,:hover 偽類會被觸發。它常用於改變連結或按鈕的樣式。

button:hover {
  background-color: #f39c12;
  color: white;
}

當使用者將滑鼠移到按鈕上時,背景會變成橙色,文字變成白色。


2. :focus(焦點)

:focus 偽類會在表單元素(如輸入框)或其他可聚焦的元素獲得焦點時觸發。這通常發生在使用者點擊或按 Tab 鍵導航時。

input:focus {
  border: 2px solid #3498db;
}

當輸入框獲得焦點時,邊框會變成藍色。


3. :active(活動狀態)

:active 偽類會在使用者按下按鈕或連結時立即觸發,並在按住時保持生效。這通常用來提供點擊時的視覺回饋。

a:active {
  color: red;
}

當使用者點擊連結時,連結的顏色會變為紅色。


4. :focus-within(內部焦點)

:focus-within 偽類會在某個元素本身或其子元素獲得焦點時觸發。它非常適合處理表單組合元素,當其中任何一個子元素被聚焦時,改變父元素的樣式。

.form-group:focus-within {
  background-color: #ecf0f1;
}

當表單組內的任一輸入框獲得焦點時,整個表單組的背景顏色會變淡。


5. :focus-visible(可見焦點)

:focus-visible 主要針對鍵盤使用者或需要特定可見焦點指示的情況。這個偽類只會在可見焦點明顯需要時觸發,比如使用 Tab 鍵導航時。

button:focus-visible {
  outline: 3px dashed #2ecc71;
}

當使用鍵盤導航到按鈕時,按鈕會顯示綠色虛線外框,方便視覺提示。


6. :target(目標元素)

:target 偽類會針對 URL 中指定的片段識別符號(如錨點)進行樣式變更。例如,當你點擊一個連結並跳轉到該頁面的特定部分時,該部分可以顯示不同的樣式。

section:target {
  background-color: #f1c40f;
  border: 2px solid #e67e22;
}

當使用者點擊跳轉連結到某個 section 時,該區域的背景會變黃,並有橙色邊框。


上一篇
#51 CSS Transition 與一些小技巧:倒帶、影響相鄰的兄弟
下一篇
#53 CSS Animation
系列文
Super Easy CSS,極度簡單 PART 2!寫出漂亮的 CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言